<template>
    <div class="list">
        <header>
            <Button type="primary" @click="add" class="addbutton" style="width:51px;height:35px;">
                <i class = "iconfont icon-add" style="font-size:14px;margin-right:5px"></i>
            </Button>
            <Input v-model.trim="val" placeholder="请输入标签内容查询" clearable style="width: 200px"/>
            <Button icon="ios-search" type="primary" @click="search" style="width:51px;height:35px;"></Button>
        </header>
        <Table class="m-table" stripe :columns="columns" :data="diseaseList"></Table>
        <div class="page">
            <Page :total="count" :current='pageNo' :page-size="pageSize" show-total show-elevator @on-change="loadPage"/>
        </div>
        <!-- 新增标签 -->
        <Modal v-model="modal1" title="新增标签" :footer="null">
            <div class="addTag">
                <p class="title">基本信息</p>
                <div class="item">
                    <span class="info">
                        <span style="color:red;">*</span>星级：
                    </span>
                    <Rate show-text v-model="addTag.starLevel"/>
                </div>
                <div class="item">
                    <span class="info">
                        <span style="color:red;text-align:right">*</span>标签内容：
                    </span>
                    <Input
                        v-model.trim="addTag.evaLabel"
                        placeholder="请输入标签内容"
                        clearable
                        style="width: 200px"
                        :maxlength="6"
                    />
                </div>
                <div class="item">
                    <span class="info">
                        <span style="color:red;text-align:right">*</span>状态：
                    </span>
                    <iSwitch v-model="switch1" size="large">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </iSwitch>
                </div>
            </div>
            <div slot="footer" class="btn-group">
                <Button type="primary" @click="addTagOk" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="addTagCancel" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
        </Modal>
        <!-- 修改标签 -->
        <Modal v-model="modal2" title="修改标签" :footer="null">
            <div class="addTag">
                <p class="title">基本信息</p>
                <div class="item">
                    <span class="info">
                        <span style="color:red;">*</span>星级：
                    </span>
                    <Rate show-text v-model="editTag.starLevel"/>
                </div>
                <div class="item">
                    <span class="info">
                        <span style="color:red;">*</span>标签内容：
                    </span>
                    <Input
                        v-model.trim="editTag.evaLabel"
                        placeholder="请输入标签内容"
                        clearable
                        style="width: 200px"
                        :maxlength="6"
                    />
                </div>
                <div class="item">
                    <span class="info">
                        <span style="color:red;">*</span>状态：
                    </span>
                    <iSwitch v-model="switch2" size="large">
                        <span slot="open">开启</span>
                        <span slot="close">关闭</span>
                    </iSwitch>
                </div>
            </div>
            <div slot="footer" class="btn-group">
                <Button type="primary" @click="editTagOk" style="width:75px;height:35px;">
                    <Icon type="ios-checkmark" style="margin-right: 5px" />提交
                </Button>
                <Button @click="editTagCancel" style="width:75px;height:35px;">
                    <i class = "iconfont icon-butongyi" style="font-size:14px;margin-right:5px"></i>取消
                </Button>		
            </div>			
        </Modal>
    </div>
</template>

<script>
import { Rate } from "view-design";
import api from "@/api/commonApi";
export default {
    components: { Rate },
    data() {
        return {
            val: "",
            modal1: false,
            modal2: false,
            addTag: {
                starLevel: 0,
                evaLabel: ""
            },
            switch1: false,
            switch2: false,
            editTag: {},
            columns: [
                { title: "排序", key: "iNum", align: "center", width: 100,
                    render: (h, params) => {
                        let iNum = (this.pageNo-1)*this.pageSize + params.index +1;
                        return h("span", iNum);
                    }},
                { title: "标签", key: "evaLabel", align: "center"},
                {
                    title: "星级",
                    key: "starLevel",
                    align: "center",
                    width: 300
                },
                {
                    title: "状态",
                    key: "enable",
                    align: "center",
                    width: 300,
                    render: (h, params) => {
                        let gender = params.row.enable;
                        let peoples = gender == 1 ? "正常" : "停用";
                        return h("span", {
                            domProps: {
                                innerHTML: peoples
                            }
                        });
                    }
                },
                {
                    title: "设置",
                    key: "operate",
                    align: "center",
                    width: 200,
                    render: (h, params) => {
                        let id = params.row.id;
                        return [
                            h(
                                "span",
                                {
                                    attrs: {
                                        href: "javascript:void(0);"
                                    },
                                    style: {
                                        color: " #5362e1",
                                        width: "60px"
                                    },
                                    on: {
                                        click: () => {
                                            this.$axios
                                                .post(api.getEvaluationById, {
                                                    id
                                                })
                                                .then(res => {
                                                    if (res.data.code) {
                                                        this.modal2 = true;
                                                        let ret =
                                                            res.data.object;
                                                        this.switch2 = Boolean(
                                                            ret.enable
                                                        );
                                                        this.editTag = ret;
                                                    } else {
                                                        this.$Message.info(
                                                            "查询失败"
                                                        );
                                                    }
                                                });
                                        }
                                    }
                                },
                                "编辑"
                            )
                        ];
                    }
                }
            ],
            diseaseList: [],
            count: 0,
            pageSize: 10,
            pageNo: 1
        };
    },
    created() {
        let breadList = [
            { path: "/index", title: "首页" },
            {
                path: "/index/maintain/configurationWarehouse/index",
                title: "配置仓"
            },
            {
                path: "/index/maintain/starClass/list",
                title: "评价管理"
            }
        ];
        this.$emit("changeBreadList", breadList);
    },
    mounted() {
        this.loadingPage(this.pageNo);
    },
    methods: {
        loadPage(index) {
            this.pageNo = index;
            if (this.val) {
                this.loadingPage(this.pageNo, this.val);
            } else {
                this.loadingPage(this.pageNo);
            }
        },
        search() {
            this.pageNo  = 1
            this.loadingPage(this.pageNo, this.val);
        },
        add(){
            this.modal1 = true
            this.addTag.starLevel = 0;
            this.addTag.evaLabel = "";
        },
        // 添加新标签
        addTagOk() {
            let params = this.addTag;
            params.enable = Number(this.switch1);
            if (params.starLevel && params.evaLabel) {
                this.$axios.post(api.newEvaluation, params).then(res => {
                    if (res.data.code) {
                        this.$Message.info("添加成功");
                        this.modal1 = false
                        this.loadingPage(this.pageNo);
                    } else {
                        this.$Message.info("添加失败,请稍候重试");
                    }
                });
            } else {
                this.$Message.info("星级或标签未填写完整");
            }
        },
        // 新标签取消
        addTagCancel() {
            this.addTag.starLevel = 0;
            this.addTag.evaLabel = "";
            this.modal1 = false;
        },
        // 修改标签
        editTagOk() {
            let params = this.editTag;
            params.enable = Number(this.switch2);
            if (params.starLevel && params.evaLabel) {
                this.$axios.post(api.newEvaluation, params).then(res => {
                    if (res.data.code) {
                        this.$Message.info("修改成功");
                        this.modal2 = false
                        this.loadingPage(this.pageNo);
                    } else {
                        this.$Message.info("修改失败,请稍候重试");
                    }
                });
            } else {
                this.$Message.info("星级或标签未填写完整");
            }
        },
        // 取消修改标签
        editTagCancel() {
            this.modal2 = false;
            this.editTag = {};           
        },
        // 加载数据
        async loadingPage(pageNo, val) {
            let params = {
                pageNo: this.pageNo,
                pageSize: this.pageSize,
                searchKey: this.val ? this.val.trim() : ''
            };
            await this.$axios.post(api.getEvaluationPage, params).then(res => {
                if (res.data.code) {
                    let ret = res.data.object;
                    this.count = ret.total;
                    if(ret.records){
                        ret.records.forEach((item, index) => {
                            item.iNum = this.addZeros(index);
                        });
                        this.diseaseList = ret.records;
                    } else {
                        this.diseaseList = []
                    }                   
                } else {
                    this.$Message.info("不允许访问");
                }
            });
        }
    }
};
</script>
<style lang="less" scoped>
.list {
    padding: 20px;
    width: 100%;
    background: #ffffff;
    box-sizing: border-box;
    header {
        margin-bottom: 20px;
    }
    .addbutton{
        background-color: #21c780;
        border: 1px solid #21c780;
    }
    .page{
      text-align: center;
      margin: 20px 0;
    }
}
.addTag {
    width: 98%;
    display: flex;
    flex-direction: column;
    margin: 10px auto;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 3px #ebedf8;
    border-radius: 5px;
    margin-bottom: 20px;
    .title {
      font-size: 20px;
      padding-left: 15px;
      margin-bottom: 20px;
      color: #333;
      height: 40px;
      line-height: 40px;
      background: #ebedf8;         
    }
    .item {
        display: flex;
        flex-direction: row;
        align-items: center;
        line-height: 45px;
        .info {
            width: 100px;
            margin-right: 20px;
            text-align:right
        }
    }
}
.btn-group{
    text-align:center
}
/deep/ .ivu-modal-wrap {
    .ivu-modal{
        float:right !important;
        background-color: #fff;
        border-radius: 10px;
        top: 0px;
        height: 100%;
    }
}
</style>
